<template>
    <div>
        <div class="home">
            <div class="over">
                <div class="fl" style="width:32%">
                    <div class="handle_task">
                        <h2>
                            待办任务
                        </h2>
                        <ul>
                            <li v-for="(item,index) in taskList" v-if="taskList.length>0">
                                <a  @click.prevent="toDeal(item.type)">
                                    <span>{{item.title}}</span>
                                    <!-- <p>{{item.details}}</p> -->
                                    <p>
                                        <b>{{item.count}}</b>
                                        <Icon type="ios-arrow-forward" class="arrow"/>
                                    </p>
                                    <!-- <button @click="toDeal(item.type)" v-if="item.type!='sign'||item.type!='unread'">去办理</button> -->
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="main_content fl">
                    <div class="detail_content">
                        <div class="module_type">
                            <ul>
                                <li @click="tiplink('preApprove')">
                                    <img src="../../assets/img/home1.png" alt="">
                                    <span>预审批</span>
                                </li>
                                <li @click="tiplink('apply')">
                                    <img src="../../assets/img/home2.png" alt="">
                                    <span>申请进件</span>
                                </li>
                                <li @click="tiplink('loanApply')">
                                    <img src="../../assets/img/home3.png" alt="">
                                    <span>申请订单管理</span>
                                </li>
                                <li @click="tiplink('counter')">
                                    <img src="../../assets/img/loan@2x.png" alt="">
                                    <span>放款订单管理</span>
                                </li>
                            </ul>
                        </div>
                        <div class="detail_info">
                            <div class="adv">
                                <ul class="over" style="border-bottom:1px solid #EEEEEF">
                                    <li v-for="(item,index) in advTitle" :class="{active:curAdv==index}" @click="tabAdv(index)">
                                        <span class="pr">{{item.title}}
                                            <!-- <i v-show="item.type=='notice'">{{advList.length}}</i> -->
                                        </span>
                                    </li>
                                </ul>
                                <div>
                                    <div class="commonList" v-show="curAdv==0">
                                        <p v-for="(item,index) in advList" :key="index" class="pr"
                                        @click="skipNotice(item,'adv')"
                                        ><i></i><span class="content">{{item.content}}</span><b>{{item.date}}</b>
                                        </p>
                                    </div>
                                    <div class="commonList"  v-show="curAdv==1">
                                        <p v-for="(item,index) in noticeLlist" :key="index" @click="skipNotice(item,'notice')">
                                            <i></i><span>{{item.content}}</span><b>{{item.date}}</b></p>
                                    </div>
                                </div>
                            </div>
                            <div class="quota">
                                <div class="quota_top">
                                    <ul class="title over" style="padding-bottom: 10px;">
                                        <li v-for="(item,index) in prescribedList">
                                            <span @click="tabQuota(index)"
                                                :class="{active:curQuota==index}"
                                                style="cursor: pointer;padding-left: 10px;"
                                                class="pr">{{item.title}}</span></li>
                                    </ul>
                                    <div class="quota_content">
                                        <div class="quota_content_amt" v-for="(item,index) in quotaList" v-show="curQuota==index">
                                            <div class="tlgc">
                                                <p class="mb10">当月放款额度</p>
                                                <span class="totalAmt">{{item.loanAmt}}</span>
                                            </div>
                                            <ul class="over precentAmt" style="margin-top: 40px;">
                                                <li class="fl tlgc">
                                                    <p class="mb10">占用额度</p>
                                                    <span>{{item.occupiedQuota}}</span>
                                                </li>
                                                <li class="fr tlgc">
                                                    <p class="mb10">剩余金额</p>
                                                    <span>{{item.surplusQuota}}</span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="count">
                                    <ul>
                                        <li><span class="pr" style="padding-left: 10px;">已超期案件数量</span></li>
                                        <li>
                                            <b style="margin-right: 30px;color: red;">22</b>
                                        </li>

                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="echarts" ref="echarts">
                        </div>
                    </div>
                </div>
            </div>
            <div class="home_logo">
                <img :src="maxLogo" alt="">
            </div>
            <Modal v-model="msgModel" :mask-closable='true' width="450" @on-cancel="cancel" :footer-hide="true">
                <div class="noticeMsg">
                    <h2>{{msgTitle}}</h2>
                    <div class="pr" style="margin-top:30px">
                        <p style="width: 260px;">{{msgContent}}</p>
                        <span>{{msgDate}}</span>
                    </div>
                </div>
            </Modal>
        </div>
        <div class="footer-box">
            <div class="footer">
                <div class="fl header-title">
                    <i class="phone"></i>
                    <span class="txt">客服电话：</span>
                    <span>400-652-7606</span>
                </div>
                <span class="copyright">©2020-2025 天津长城滨银汽车金融有限公司</span>
                <ul class="fr footer-con">
                    <li class="fl login-social">
                        <div class=" login-phone"></div>
                        <div class="login-qr-box">
                            <div class="login-qr">
                                <div class="qr">
                                    <img src="../../assets/img/ercode.png">
                                </div>
                                <div class="qr-title">扫码下载APP</div>
                            </div>
                        </div>
                    </li>
                    <li class="fl login-social">
                        <div class=" login-wx"></div>
                        <div class="login-qr-box">
                            <div class="login-qr">
                                <div class="qr">
                                    <img src="../../assets/img/ercode.png">
                                </div>
                                <div class="qr-title">扫码加微信</div>
                            </div>
                        </div>
                    </li>
                    <li class="fl login-social" ref="loginQq">
                        <div class=" login-qq"></div>
                        <div class="login-qr-box" :class="qrBoxCls">
                            <div class="login-qr">
                                <div class="qr">
                                    <img src="../../assets/img/ercode.png">
                                </div>
                                <div class="qr-title" style="padding-top: 0;">
                                    <span style="font-size:12px"> 客服QQ: </span>
                                   <br/> <span style="font-size:14px">1001001000</span>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
    import echarts from 'echarts'
    import "../../assets/css/base.css";
    import maxLogo from '@/assets/images/logo1.jpg'

    import {
        queryPendingInfo,
        getInfo,
        getAnnouncementInfo,
        updateInfo,
        getQuotaListByChannelId,
        getTotalInfoForPc
    } from '_p/afs-apply/api/home/home.js'
    import {getUserInfo} from '@/projects/basic/api/admin/user'
    import * as utils from '_p/afs-apply/assets/js/utils.js'

    export default {
        name: "home",
        data() {
            return {
                maxLogo,
                qrBoxCls:"",
                key: '',
                curAdv: "0",
                curQuota: "0",
                quotaList: [],
                channelId: "",
                noticeId: "",
                msgTitle: "",
                msgContent: "",
                msgDate: "",
                msgType:"adv",
                xDate: [],
                advTitle: [
                    {
                        title: "公告栏",
                        type: "notice"
                    },
                    {
                        title: "消息通知",
                        type: "msg"
                    }
                ],
                prescribedList: [
                    {
                        title: "新车签放额度",
                    },
                    {
                        title: "新车先放后抵额度",
                    },
                    {
                        title: "二手车签放额度",
                    },
                    {
                        title: "二手车先放后抵额度",
                    }
                ],
                mapPend: {
                    draft: "进件草稿",
                    suspend: "进件修订暂停",
                    wait: "放款待提交",
                    back: "放款退回",
                    again: "GPS二次派单",
                    refuse: "复议-补录资料",
                    pass: "资产变更(贷前)",
                    condition: "附条件核准",
                    sign: "签放补录",
                    unread: "消息未读"
                },
                advList: [],
                noticeLlist: [],
                taskList: [],
                msgModel: false,
            }
        },
        created() {
            this.queryUserInfo()
        },
        mounted() {
            this.calcPopWidth();
            window.addEventListener('resize', this.calcPopWidth)
        },
        beforeDestroy() {
            window.removeEventListener('resize', this.calcPopWidth)
        },
        methods: {
            calcPopWidth(){
                let left = document.body.clientWidth - this.$refs.loginQq.getBoundingClientRect().right

                console.log(document.body.clientWidth,'====',this.$refs.loginQq.getBoundingClientRect().right)
                // this.$nextTick(() => {
                //     console.log(this.$refs.loginQq.getBoundingClientRect(),'-------')
                // })
                if(left < 40) {
                    this.qrBoxCls = 'topLeft'
                }
            },
            queryUserInfo() {
                getUserInfo().then(res => {
                    if (res.code == "0000") {
                        console.log(res, "Res")
                        if (res.data) {
                            if (res.data.userExtInfo.channelId) {
                                this.channelId = res.data.userExtInfo.channelId;
                                this.queryPendInfo()
                                this.queryNotice()
                                this.queryAnnouncementInfo()
                                this.queryQuotaList()
                                this.queryTotalInfo()
                            }
                        }
                    }
                })
            },
            // 查询代办任务
            queryPendInfo() {
                let params = {
                    channelId: this.channelId
                };
                queryPendingInfo(params).then(res => {
                    if (res.code == "0000") {
                        let tempArr = [];
                        for (var key in res.data) {
                            if (res.data[key] > 0) {
                                let obj = {
                                    title: this.mapPend[key],
                                    count: res.data[key],
                                    type: key
                                }
                                tempArr.push(obj);
                            }
                        }
                        this.taskList = tempArr;
                        console.log(this.taskList, "this.taskList")
                    }
                })
            },
            // 点击消息弹出详情弹框
            skipNotice(item,type) {
                console.log(item,"item")
                this.msgModel = true;
                this.msgTitle = item.title;
                this.msgContent = item.content;
                this.msgDate = item.date;
                this.msgType=type;
                if(type=="notice"){
                    this.noticeId = item.id;
                }
            },
            // 查询额度
            queryQuotaList() {
                let param = {
                    channelId: this.channelId
                }
                getQuotaListByChannelId(param).then(res => {
                    if (res.code == "0000") {
                        //quotaType: 2 先放后抵  1签放
                        let tempArr = [];
                        let quotaPutNew = null, quotaPutOld = null, quotaBeforeNew = null, quotaBeforeOld = null;
                        res.data.quotaPutList.forEach((item, index) => {
                            if (item.businessType == "01") {
                                quotaPutNew = item;
                            } else {
                                quotaPutOld = item;
                            }
                        })
                        res.data.quotaBeforeList.forEach((item, index) => {
                            if (item.businessType == "01") {
                                quotaBeforeNew = item;
                            } else {
                                quotaBeforeOld = item;
                            }
                        })
                        tempArr.push(quotaPutNew);
                        tempArr.push(quotaBeforeNew);
                        tempArr.push(quotaPutOld);
                        tempArr.push(quotaBeforeOld);
                        tempArr.forEach((item, index) => {
                            let loanAmt = utils.add(item.occupiedQuota, item.surplusQuota);
                            item.loanAmt = this.fmoney(parseFloat(loanAmt), 2);
                            item.occupiedQuota = this.fmoney(parseFloat(item.occupiedQuota), 2)
                            item.surplusQuota = this.fmoney(parseFloat(item.surplusQuota), 2)
                        })
                        this.quotaList = tempArr;

                    }
                })
            },
            // 统计图的接口
            queryTotalInfo() {
                let param = {
                    channelId: this.channelId
                }
                getTotalInfoForPc(param).then(res => {
                    if (res.data) {
                        let xDate = [];
                        let applyQuantity = [];
                        let loanQuantity = [];
                        res.data.applyCount.forEach((item, index) => {
                            xDate.push(item.type);
                            applyQuantity.push(item.account)
                        })
                        res.data.contractCount.forEach((item, index) => {
                            loanQuantity.push(item.account)
                        })
                        this.drawPic(xDate, applyQuantity, loanQuantity);
                    }
                })
            },
            drawPic(xDate, applyQuantity, loanQuantity) {
                let option = {
                    title: {
                        text: '申请量',
                        textStyle:{
                            color:"#282D32",
                            fontSize:14,
                        },
                        left:"10px",
                    },
                    tooltip: {
                        transitionDuration:0,
                        trigger: 'item',
                        axisPointer: {
                            type:"none"
                        },
                        formatter:function(params){
                            // console.log(params,"params")
                            let html="";
                            html='<p style="position:relative;"><span style="display:block;width:100%">'+params.data+'</span><i style="width:0;height:0;border-left: 4px solid;border-right: 4px solid transparent;border-top: 4px solid #F5BB1A;position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:2px"></i><p>';
                            return html;
                        },
                        backgroundColor:"#F5BB1A",
                        position:"top",
                        padding: [3, 20]
                    },
                    legend: {
                        left: "100px",
                        data: [
                            {
                                name: "申请量",
                                textStyle: {
                                    color: "#F5BB1A",

                                },
                                icon: "rect",
                            },
                            {
                                name: "放款量",
                                textStyle: {
                                    color: "#EB9620",

                                },
                                icon: "rect",
                            }
                        ]
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xDate,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#2B3034'
                            },
                            margin:20,
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#f4f4f4",
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            show: true,
                            margin:20,
                            textStyle: {
                                color: '#2B3034'
                            }
                        },
                        axisLine: {       //y轴
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false,
                        },
                    },
                    series: [
                        {
                            name: '申请量',
                            type: 'line',
                            data: applyQuantity,
                            smooth: true,
                            // symbol:'circle',
                            // showSymbol: false,
                            lineStyle: {
                                opacity: 0,
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1, [{
                                            offset: 0,
                                            color: "rgba(255, 148, 0, 1)",
                                        },
                                            {
                                                offset: 1,
                                                color: 'rgba(235, 150, 32, 0.3)'
                                            }
                                        ]
                                    )
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: "#F5BB1A"
                                }
                            }
                        },
                        {
                            name: '放款量',
                            type: 'line',
                            smooth: true,
                            data: loanQuantity,
                            // symbol:'circle',
                            // showSymbol: false,
                            lineStyle: {
                                opacity: 0,
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //而0 0 0 1则代表渐变色从正上方开始
                                        offset: 0,
                                        color: 'rgba(255, 86, 0, 1)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(255, 86, 0, 0.33)'
                                    }]),
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: "#EB9620"
                                }
                            }
                        },
                    ]
                };
                let _this = this;
                this.$nextTick(() => {
                    _this.dom = echarts.init(_this.$refs.echarts);
                    _this.dom.setOption(option);
                })
            },
            // 查询未读消息通知
            queryNotice() {
                let param = {
                    channelId: this.channelId,
                    status: "0",
                    pageNumber: 1,
                    pageSize: 1000,
                }
                getInfo(param).then(res => {
                    if (res.code == "0000") {
                        if (res.data) {
                            let tempArr = [];
                            res.data.records.forEach((item, index) => {
                                let obj = {
                                    title: item.title,
                                    content: item.content,
                                    date: item.updateTime,
                                    id: item.id,
                                }
                                tempArr.push(obj);
                            })
                            this.noticeLlist = tempArr;
                        }
                    }
                })
            },
            // 查询公告栏
            queryAnnouncementInfo() {
                let param = {
                    //渠道归属
                    channelBelong: "",
                    // 是否紧急
                    isUrgent: "",
                    pageSize: 1000,
                    pageNumber: 1,
                }
                getAnnouncementInfo(param).then(res => {
                    if (res.code == "0000") {
                        let tempArr = [];
                        res.data.records.forEach((item, index) => {
                            let obj = {
                                content: item.content,
                                date: item.createTime
                            }
                            tempArr.push(obj);
                        })
                        this.advList = tempArr;
                    }
                })
            },
            toDeal(type) {
                let random = this.generateMixed(10);
                if (type == "suspend") {//进件修订暂停
                    this.afs.newTab(this, 'projects/afs-apply/pages/order-mng/loanApplyMng', '申请订单管理', 'ios-add',
                        {applyStatusList: '05', flag: "home"}, 'loanApplyMng' + random, [], true);
                } else if (type == "draft") { //进件草稿
                    this.afs.newTab(this, 'projects/afs-apply/pages/order-mng/loanApplyMng', '申请订单管理', 'ios-add',
                        {applyStatusList: '00', flag: "home"}, 'loanApplyMng' + random, [], true);
                }
                else if (type == "condition") {//附条件核准
                    this.afs.newTab(this, 'projects/afs-apply/pages/order-mng/loanApplyMng', '申请订单管理', 'ios-add',
                        {applyStatusList: '09', flag: "home"}, 'loanApplyMng' + random, [], true);
                }
                else if(type == "pass") {//资产变更(贷前)
                    this.afs.newTab(this, 'projects/afs-apply/pages/apply-opr-record/assertChangeMng', '资产变更管理', 'ios-add',
                    {applyStatusForAssertChange:'02', flag: "home"}, 'assertChangeMng' + random, [], true);
                }
                 else if (type == "refuse") { //复议-补录资料
                    this.afs.newTab(this, 'projects/afs-apply/pages/order-mng/loanApplyMng', '申请订单管理', 'ios-add',
                        {applyStatusList: '12', flag: "home"}, 'loanApplyMng' + random, [], true);
                } else if (type == "wait") { //待提交
                    this.afs.newTab(this, 'projects/afs-apply/pages/order-mng/contractApplyMng', '放款订单管理', 'ios-add',
                        {contractApplyStatus: '01', flag: "home"}, 'contractApplyMng' + random, [], true);
                } else if (type == "back") { //放款退回
                    this.afs.newTab(this, 'projects/afs-apply/pages/order-mng/contractApplyMng', '放款订单管理', 'ios-add',
                        {contractApplyStatus: '05', flag: "home"}, 'contractApplyMng' + random, [], true);
                } else if (type == "again") { // GPS二次派单
                    this.afs.newTab(this, 'projects/afs-apply/pages/order-mng/contractApplyMng', '放款订单管理', 'ios-add',
                        {gpsStatus: 'unPassAudit', flag: "home"}, 'contractApplyMng' + random, [], true);
                }
            },
            //根据客户姓名，单号，手机号查询订单及放款信息
            queryinfo(v) {
                let params = {
                    key: v,
                    flag: "home"
                }
                this.afs.newTab(this, 'projects/afs-apply/pages/others/order-lending-manage/orderLendingMng', '订单查询结果', 'ios-add',
                    {params}, 'orderLeadingMng' + v, [], true);
            },
            clearinfo() {
                this.key = '';
            },
            tabAdv(index) {
                this.curAdv = index;
            },
            tabQuota(index) {
                this.curQuota = index;
            },
            tiplink(typeurl) {
                if (typeurl == "preApprove") {
                     if(this.$store.state.user.roles.toString().indexOf("ROLE_XCRECORDED") != -1 ||this.$store.state.user.roles.toString().indexOf("ROLE_XCAPPLY") != -1||this.$store.state.user.roles.toString().indexOf("ROLE_RECORDED") != -1 ||this.$store.state.user.roles.toString().indexOf("ROLE_APPLY") != -1){
                        this.afs.newTab(this, 'projects/afs-apply/pages/pre-approve/preApproveManage', '预审批', 'ios-add', {}, 'preApproveManage', [], true);
                    }else{
                        this.$Message.warning("暂无权限！");
                        return;
                    }
                } else if (typeurl == "apply") {
                    if(this.$store.state.user.roles.toString().indexOf("ROLE_XCRECORDED") != -1 ||this.$store.state.user.roles.toString().indexOf("ROLE_XCAPPLY") != -1||this.$store.state.user.roles.toString().indexOf("ROLE_RECORDED") != -1 ||this.$store.state.user.roles.toString().indexOf("ROLE_APPLY") != -1){
                        this.afs.newTab(this, 'projects/afs-apply/pages/apply-report/personal/index', '申请进件', 'ios-add', {}, 'index', [], true);
                    }else{
                        this.$Message.warning("暂无权限！");
                        return;
                    }

                } else if (typeurl == "loanApply") {
                    this.afs.newTab(this, 'projects/afs-apply/pages/order-mng/loanApplyMng', '申请订单管理', 'ios-add', {}, 'loanApplyMng', [], true);
                } else {
                    this.afs.newTab(this, 'projects/afs-apply/pages/order-mng/contractApplyMng', '放款订单管理', 'ios-add', {}, 'counter', [], true);
                }
            },
            confirm() {

            },
            cancel() {
                this.msgModel = false;
                if(this.msgType=='notice'){
                    let param = {
                        id: this.noticeId,
                    }
                    updateInfo(param).then(res => {
                        if (res.code == "0000") {
                            this.queryNotice();
                        }
                    })
                }
            },
            generateMixed(n) {
                var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
                var res = "";
                for (var i = 0; i < n; i++) {
                    var id = Math.ceil(Math.random() * 35);
                    res += chars[id];
                }
                return res;
            },
            fmoney(s, n) {
                n = n > 0 && n <= 20 ? n : 2;
                s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
                var l = s.split(".")[0].split("").reverse(), r = s.split(".")[1], t = "";
                for (var i = 0; i < l.length; i++) {
                    t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
                }
                return t.split("").reverse().join("") + "." + r;
            }
        }
    }
</script>
<style scoped>
    .main_content .search >>> .ivu-input-small {
        height: 30px;
    }

    .main_content .search >>> .ivu-input-prefix {
        line-height: 30px;
    }

    .main_content .search >>> .ivu-input-prefix i {
        font-size: 18px;
    }

    .main_content .search >>> .ivu-input-small::-webkit-input-placeholder {
        color: #a3a3a3;
    }

    .home {
        min-width: 1200px;
        max-width: 1600px;
        margin: 0 auto 50px;
    }

    .home .handle_task {
        box-shadow: 0 0 20px 0px rgba(30, 30, 30, 0.05);
        margin: 25px 9px 15px 12px;
        background: white;
        min-height: 842px;
    }

    .home .handle_task > h2 {
        height: 50px;
        line-height: 50px;
        padding-left: 30px;
        border-radius: 5px 5px 0 0;
        font-size: 14px;
        color: #282D32;
        border-bottom: 1px solid #EEEEEF;
        position: relative;
    }
    .home .handle_task > h2::before{
        width: 4px;
        height: 15px;
        position: absolute;
        content: "";
        background: #F5BB1A;
        top: 50%;
        transform: translateY(-50%);
        left: 18px;
    }

    .home .handle_task > ul {
        border-radius: 0px 0px 10px 10px;
    }

    .handle_task > ul > li a{
        display: flex;
        font-size: 12px;
        justify-content: space-between;
        padding: 15px 30px;
        cursor: pointer;
        color:#515a6e;
    }
    .handle_task > ul > li a b{
        color:#F5BB1A;
    }
    .handle_task > ul > li a i{
        margin-left: 20px;
    }
    .home .handle_task > ul > li:hover a{
        background: #EB9620;
        color:white;
    }
    .home .handle_task > ul > li:hover a  b,
    .home .handle_task > ul > li:hover a  i{
        color:white;
    }

    .home .handle_task > ul > li button {
        border: none;
        outline: none;
        background: linear-gradient(133deg, rgba(255, 197, 90, 1) 0%, rgba(255, 153, 36, 1) 100%);
        color: white;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 15px;
        cursor: pointer;
        width: 80px;
        height: 25px;
        line-height: 25px;
    }

    .home .handle_task > ul > li span>i {
        width: 25px;
        height: 15px;
        line-height: 15px;
        background: rgba(255, 93, 93, 1);
        content: "";
        position: absolute;
        top: 0;
        font-style: normal;
        font-size: 12px;
        color: white;
        text-align: center;
        border-radius: 4px;
        right: -35px;
    }
    .home .handle_task > ul > li>p b{
        color:#EB9620;
    }
    .home .handle_task > ul > li>p i{
        font-size: 14px;
        color: #515a6e;
        margin-left: 30px;
    }

    .home .main_content {
        padding-top: 25px;
        width: 68%;
        padding-left: 9px;
        padding-right: 12px;
    }

    .main_content .search .btn button {
        outline: none;
        border: none;
        border-radius: 5px;
        width: 68px;
        height: 30px;
        cursor: pointer;
    }

    .main_content .search .query {
        background: linear-gradient(133deg, rgba(255, 197, 90, 1) 0%, rgba(255, 153, 36, 1) 100%);
        color: white;
        margin-left: 20px;
    }

    .main_content .search .clear {
        background-color: white;
        color: #b1b1b1;
        float: right;
    }

    .main_content {
        width: 70%;
    }

    .main_content .detail_content .detail_info > div.module_type {
        box-shadow: none;
        background-color: transparent;
        margin: 0px;
        width: 100%;
    }

    /* 额度 */
    .detail_content .detail_info {
        display: flex;
        margin-top: 18px;
    }

    .detail_content .detail_info > div {
        width: 50%;
    }
    .detail_content .detail_info>div:first-child{
        background: white;
        margin-right: 9px;
        box-shadow: 0 0 10px 0px rgba(30, 30, 30, 0.05);
        background: white;

    }
    .detail_content .detail_info>div:last-child{
        margin-left: 9px;
    }

    .detail_content .detail_info > div.quota > ul.precentAmt > li,
    .detail_content .detail_info > div.adv > ul > li {
        width: 50%;
        float: left;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 14px;
        position: relative;
        cursor: pointer;
    }

    .detail_content .detail_info > div.adv > ul > li {
        height: 70px;
        line-height: 70px;
    }

    .detail_content .detail_info > div.adv > ul > li span > i {
        font-size: 12px;
        height: 15px;
        width: 15px;
        border-radius: 50%;
        background: red;
        position: absolute;
        line-height: 15px;
        top: 0;
        color: white;
        font-style: normal;
        right: -20px;
        text-align: center;
    }

    .detail_content .detail_info > div.adv > ul > li.active span::after {
        content: '';
        width: 85%;
        height: 2px;
        background-color: #F5BB1A;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -5px;
    }

    .detail_content .detail_info > div.quota .title {
        line-height: 40px;
        position: relative;
    }

    .detail_content .detail_info > div.quota .title > li {
        width: 50%;
        position: relative;
        float: left;
        padding-left: 36px;
    }

    .detail_info > div.quota .title > li span.active::before {
        width: 4px;
        height: 15px;
        position: absolute;
        content: "";
        background: #F5BB1A;
        top: 50%;
        transform: translateY(-50%);
        left: 0px;
    }

    .quota_content .quota_content_amt {
        padding: 0 0px 10px;
        margin: 0 30px;
    }

    .quota_content .quota_content_amt > div .totalAmt {
        font-size: 20px;
        color: #EB9620;
    }

    .quota_content .quota_content_amt .precentAmt {
        display: flex;
    }

    .quota_content_amt .precentAmt > li {
        width: 50%;
        position: relative;
    }

    .quota_content_amt .precentAmt > li:first-child::before {
        content: "";
        height: 35px;
        width: 1px;
        position: absolute;
        background-color: #D8D8D8;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .quota_content_amt .precentAmt > li > span {
        font-size: 16px;
        color: #EB9620;
    }
    .quota_top{
        box-shadow:0 0 10px 0px rgba(30, 30, 30, 0.05);
        background: white;
        margin-bottom: 18px;
    }
     .count {
        height: calc(100% - 266px);
        position: relative;
        box-shadow:0 0 10px 0px rgba(30, 30, 30, 0.05);
        background-color: white;

    }
    .count>ul{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        font-size: 14px;
    }
    .count>ul>li{
        width: 50%;
        float: left;
        position: relative;
        padding-left: 36px;
    }
    .count>ul>li:first-child span::before{
        width: 4px;
        height: 15px;
        position: absolute;
        content: "";
        background: #F5BB1A;
        top: 50%;
        transform: translateY(-50%);
        left:0px
    }
    .count>ul>li:last-child{
        text-align: right;
    }
    .quota_content .count > b {
        font-weight: normal;
    }

    /* 业务类型 */
    .detail_content div.module_type > ul{
        display: flex;
    }
    .detail_content div.module_type > ul li {
        width: 25%;
        height: 100px;
        margin-right: 18px;
        padding-left: 15px;
        background: linear-gradient(134deg, rgba(255, 197, 90, 1) 0%, rgba(255, 165, 46, 1) 100%);
        border-radius: 4px;
        position: relative;
        cursor: pointer;
    }

    .detail_content div.module_type > ul li:nth-child(2) {
        background: linear-gradient(135deg, rgba(139, 221, 250, 1) 0%, rgba(83, 185, 243, 1) 100%);
    }

    .detail_content div.module_type > ul li:nth-child(3) {
        background: linear-gradient(133deg, rgba(255, 192, 160, 1) 0%, rgba(255, 117, 47, 1) 100%);
    }

    .detail_content div.module_type > ul li:last-child {
        background: linear-gradient(318deg, rgba(250, 199, 76, 1) 0%, rgba(255, 202, 130, 1) 100%);
    }

    .detail_content div.module_type > ul li:last-child {
        margin-right: 0px;
    }

    .detail_content div.module_type > ul li img {
        margin-top: 11px;
        width: 78px;
    }

    .detail_content div.module_type > ul li span {
        color: white;
        font-size: 14px;
        margin: 0 0 10px 15px;
        position: absolute;
        bottom: 5px;
    }

    /* 公告栏,消息通知 */
    .detail_content .detail_info > div.adv .commonList {
        padding:0  25px;
        height: 295px;
        overflow: auto;
    }

    .detail_content .detail_info > div.adv .commonList p {
        padding: 15px 10px 15px 10px;
        border-bottom: 1px solid #ececec;
        overflow: hidden;
        cursor: pointer;
    }

    .detail_content .detail_info > div.adv .commonList p > i {
        width: 4px;
        height: 4px;
        position: absolute;
        left: 0px;
        background-color: white;
        border-radius: 50%;
        top: 50%;
        transform: translateY(-50%);
    }
    .detail_info > div.adv .commonList p:last-child{
        border-bottom:none;
    }
    .detail_info > div.adv .commonList p:hover {
        color: #F5BB1A;
    }
    .detail_info > div.adv .commonList p:hover i{
        background-color: #EB9620;
    }
    div.adv .commonList p > b {
        font-weight: normal;
        float: right;
    }

    div.adv .commonList p > span {
        display: block;
        float: left;
        width: 50%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow-y: auto;
    }

    .detail_content .detail_info > div.adv .commonList p.active {
        color: #EB9620;
    }

    .detail_content .detail_info > div.adv .commonList p.active > i {
        background-color: #EB9620;
    }

    /* 折现 */
    .echarts {
        min-height: 340px;
        background: white;
        box-shadow: 0 0 10px 3px #eaebee;
        margin-top: 18px;
        padding:40px 0 20px 10px;
    }

    .noticeMsg > div {
        font-size: 14px;
    }

    .noticeMsg span {
        position: absolute;
        right: 0;
        top: 0;
    }
    /* 底部样式 */
.footer-box {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background-color: white;
    box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.04);
    padding: 0 10px;
  }

  .footer {
    min-width: 1200px;
    max-width: 1600px;
    margin: auto;
    height: 50px;
    position: relative;
    padding: 0 12px;
  }
  .footer li{
    position: relative;
    margin-right: 34px;

  }
  .footer li:last-child{
    margin-right: 0;
  }
  .footer-con {
    padding: 10px 0;
  }
  .login-qr-box {
    position: absolute;
    will-change: top, left;
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%);
    padding-bottom: 10px;
    transition: all .5s linear;
    opacity: 0;
    display: none;
    z-index: 100;
  }
  .login-qr-box::before {
      content:'';
      display: block;
      position: absolute;
      border: 8px solid transparent;
      border-top-color: #FFFBF5;
      bottom: -4px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 12;
    }
    .login-qr-box::after {
      content:'';
      display: block;
      position: absolute;
      border: 10px solid transparent;
      border-top-color: #EB9620;
      bottom: -8px;
      left: 50%;
      transform: translateX(-50%);
      z-index:10
    }
    .login-qr-box.topLeft{
        left: auto;
        right: 0;
        transform: translate(0, -100%);
    }
    .login-qr-box.topLeft::before{
        left: auto;
        right: 1px;
    }
    .login-qr-box.topLeft::after{
        left: auto;
        right: -3px;
    }
    .login-qr {
    padding: 9px 18px;
    width: 137px;
    height: 157px;
    background: #FFFBF5;
    border: 2px solid #EB9620;
    border-radius: 4px;
    text-align: center;
  }
  .login-qr  .qr , .login-qr img{
        margin: auto;
      width: 100px;
      height: 100px;
  }
  .login-qr  .qr-title {
      padding-top: 10px;
      font-size: 12px;
      color: #666;
      line-height: 20px;
    }
    .copyright{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 12px;
    color:#000;
    line-height: 20px;
  }
  .login-social {
  width: 30px;
  height: 30px;
  transition: all .5s linear;
}
.login-phone, .login-wx, .login-qq {
    width: 30px;
    height: 30px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 30px;
  }

  .login-phone {
    background-image: url("../../assets/img/phone1.png")
  }
  .login-social:hover .login-phone {
    background-image: url("../../assets/img/phone2.png");
  }
  .login-social:hover .login-phone,.login-social:hover .login-qr-box{
    display: block;
    opacity: 1;
  }
  .login-qq {
    background-image: url("../../assets/img/qq1.png")
  }
  .login-social:hover .login-qq{
    background-image: url("../../assets/img/qq2.png");
  }
  .login-social:hover .login-qq,.login-social:hover .login-qr-box {
    display: block;
    opacity: 1;
  }
  .login-wx {
    background-image: url("../../assets/img/wx1.png")
  }
  .login-social:hover .login-wx{
    background-image: url("../../assets/img/wx2.png");
  }
  .login-social:hover .login-wx,.login-social:hover .login-qr-box {
    display: block;
    opacity: 1;
  }
  .header-title {
    padding-top: 19px;
    line-height: 22px;
    font-size: 14px;
    font-weight: bold;
    color: #000000;
  }
  i.phone{
    display: inline-block;
    width: 22px;
    height: 22px;
    background-repeat: no-repeat;
    background-size: 18px;
    vertical-align: bottom;
    background-position: center;
    background-image: url('../../assets/img/dianhua.png');
  }
  span.txt{
    font-weight: 400;
    color: #9B9B9B;
    letter-spacing: 1px;
  }
  .home_logo>img{
    opacity: 0.5;
    width: 280px;
    margin:0 auto 20px;
    display: block;
  }
</style>
